<template>
  <div class="monthly calculate">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/payroll/salary/monthly">返回</BreadcrumbItem>
        <BreadcrumbItem to="/payroll/salary/monthly/detail">当月工资表</BreadcrumbItem>
        <BreadcrumbItem>核算工资</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="c-header">
      <div class="title">测试</div>
      <div class="title">2020年4月</div>
      <div class="desc">
        (计薪周期：04月01日 - 04月30日
        <Tooltip placement="top">
          <Icon type="ios-help-circle" size="18" class="ml4" />
          <div slot="content" class="tooltip-custom">
            <p>个税所属期：2020年5月。</p>
            <p>即个税申报系统报税时为对应的税款月份，与工资发放的所属月份相同。</p>
          </div>
        </Tooltip>
      </div>)
    </div>

    <ul class="c-list">
      <li class="c-item">
        <div class="c-item-title">确认计薪人员和基础工资</div>
        <ul class="c-item-sublist">
          <li class="c-i-s-item">
            <div class="c-wrap flex">
              <div class="l-title">计薪人员</div>
              <div class="l-desc">
                当前计薪员工
                <span class="count-num">0</span>人
              </div>
              <div class="l-btn">
                <a href="javascript:">同步计薪人员</a>
              </div>
            </div>
          </li>
          <li class="c-i-s-item">
            <div class="c-wrap flex">
              <div class="l-title">基础工资</div>
              <div class="l-desc">当前无计薪人员。请先确认计薪人员，再录入工资</div>
              <div class="l-btn">
                <a href="javascript:">导入工资数据</a>
              </div>
            </div>
          </li>
        </ul>
      </li>

      <li class="c-item">
        <div class="c-item-title">同步考勤社保数据</div>
        <ul class="c-item-sublist">
          <li class="c-i-s-item">
            <div class="c-wrap flex">
              <div class="l-title">考勤数据</div>
              <div class="l-desc">
                从考勤同步考勤结果，参与工资计算。若不用考勤系统。您可以
                <a>【录入考勤结果】</a>参与工资计算
              </div>
              <div class="l-btn">
                <a href="javascript:">同步考勤数据</a>
              </div>
            </div>
          </li>
          <li class="c-i-s-item">
            <div class="c-wrap flex">
              <div class="l-title">社保公积金</div>
              <div class="l-desc">
                从社保同步社保、公积金数据，参与工资计算。若不用社保系统。您可以
                <a>【导入社保公积金】</a>参与工资计算
              </div>
              <div class="l-btn">
                <a href="javascript:">同步社保公积金</a>
              </div>
            </div>
          </li>
        </ul>
      </li>

      <li class="c-item">
        <div class="c-item-title">
          录入个税扣缴信息
          <span class="yellow">（非累计预扣法可跳过此步骤）</span>
        </div>
        <ul class="c-item-sublist">
          <li class="c-i-s-item green-line">
            <div class="c-wrap flex">
              <div class="l-title">专项附加扣除累计</div>
              <div class="l-desc">
                请从税务局系统导出专项附加扣除累计报表后，直接导入本系统参与每月个税计算
                <a href>【查看帮助】</a>
              </div>
              <div class="l-btn">
                <a href="javascript:">导入专项附加扣除累计</a>
              </div>
            </div>
          </li>
          <li class="c-i-s-item">
            <div class="c-wrap flex">
              <div class="l-title">截止上月个税累计</div>
              <div class="l-desc">若非纳税年度第一个月份开始使用系统，或上月个税累计值有误，请通过录入截止上月个税累计进行修改</div>
              <div class="l-btn">
                <a href="javascript:">录入截止上月个税累计</a>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>

    <div class="fix-footer-btns"></div>

    <div class="bottom-btns-wrap">
      <div class="btns">
        <Button class="save-btn-green">计算工资</Button>
      </div>
    </div>

    <!--modal  -->
    <div class="mask none"></div>
    <div class="import-cart none">
        <div class="i-c-h">
            <div style="flex: 1 1 0%;"><span style="float: left;"><img src=""></span><div style="float: left; margin-left: 24px;"><span style="display: block; font-size: 15px; font-weight: bold; margin: 10px 0px;">同步社保公积金</span><span>正在同步...</span></div></div>
            <div class="right-status">
                <span class="percent">完成</span>
                <span class="bottom-line"></span>
            </div>
        </div>
        <div class="bottom-bar">
             <Progress :percent="100" :hide-info="true" class="progress"/>
        </div>
    </div>
    <!--  -->
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    calucate() {
      this.$router.push("/payroll/salary/monthly/calucate");
    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>